<template>
  <div class="view-content">
    <p class="title">车场饱和度排名</p>
    <div class="over-view" v-loading="viewLoading" element-loading-text="拼命加载中"  element-loading-background="rgba(8,18,79,1)">
      <div class="bar-box"  v-for="(item,index) in barDatas">
        <div class="bar-item">
          <span class="bar-header" :class="{
          active: index == 0,
          active1: index == 1,
          active2: index == 2,
          active3: index == 3,
          active4: index == 4
        }">{{index+1}}</span>
          <div style="display: inline-block;width: 75%;vertical-align: middle;">
            <p class="park-name">
              <span>{{item.parkName}}</span>
              <span style="float: right;">{{item.saturation}}</span>
            </p>
            <div class="bar">
              <div class="bar-proportion" :style="{'width': item.saturation/max * wth + 'px'}" :class="{
                activeStyle: index == 0,
                activeStyle1: index == 1,
                activeStyle2: index == 2,
                activeStyle3: index == 3,
                activeStyle4: index == 4}" ></div>
            </div>
          </div>

          <!-- <div class="bar-num">{{item.value}} </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Bar from '@/components/Bar/index.vue'
  export default {
    name: 'over-view',
    components: { Bar },
    data() {
      return {
        enlargeShow: 0,
        max: '0px',
        wth: 0,
        barDatas: [],
        viewLoading: true
      }
    },
    mounted() {
      this.getSaturation();

    },
    methods: {
      getSaturation() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/idc-park-saturation',
          params: {parkAddress: '河北省石家庄市'}
        }).then((res) => {
          if(res.code == 200) {
            this.barDatas = res.data;
            this.$nextTick(() => {
              this.barProportion();
            })
          }
        })
      },

      barProportion() {
        let bar = document.getElementsByClassName('bar')[0];
        this.wth = bar.clientWidth;
        this.max = 0;
        this.barDatas.forEach(item => {
          if(item.value > this.max) {
            this.max = item.value;
          }
        })
        this.max = Math.round(this.max *= 1.02);
        this.viewLoading = false;
      }
    }
  }
</script>

<style scoped>
  .park-name {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
  }




  p {
    margin: 0;
  }

  .view-content {
    height: 100%;
    position: relative;
    padding-top: 1.2rem;
  }

  .title {
    margin: 0;
    color: #00FFFF;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }

  .over-view {
    height: 90%;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .bar-box {

  }

  .bar-item {
    margin: 1rem;
  }

  .bar-header {
    display: inline-block;
    padding: 1.2rem 1.6rem;
    background-color: red;
    color: #fff;
    font-size: 2rem;
    margin-right: 1rem;
  }

  .bar {
    height: 0.9em;
    width: 100%;
    background-color: #000000;
    display: inline-block;
    border: 1px solid #1676E9;
    border-radius: 5rem;
    overflow: hidden;
  }

  .bar-proportion {
    background-image: linear-gradient(to right, RGBA(22, 118, 233, 1), RGBA(87, 199, 237, 1));
    height: 100%;
    border-radius: 5rem;
  }

  .activeStyle {
    background-image: linear-gradient(to right, RGBA(255, 60, 42, 1), RGBA(255, 165, 62, 1));
  }

  .activeStyle1 {
    background-image: linear-gradient(to right, RGBA(243, 115, 37, 1), RGBA(255, 165, 62, 1));
  }

  .activeStyle2 {
    background-image: linear-gradient(to right, RGBA(243, 192, 37, 1), RGBA(255, 165, 62, 1));
  }

  .activeStyle3,
  .activeStyle4 {
    background-image: linear-gradient(to right, RGBA(22, 118, 233, 1), RGBA(87, 199, 237, 1));
  }

  .bar-num {
    color: rgba(132, 132, 132, 1);
    vertical-align: top;
    display: inline-block;
  }

  .active {
    background-color: #E93654;
  }

  .active1 {
    background-color: #F37325;
  }

  .active2 {
    background-color: #F3C025;
  }

  .active3,
  .active4 {
    background-color: #57C7ED;
  }







</style>
